<template>
  <div>
    <el-card>
      <!-- class="project-list-container" -->
      <div>
        <div class="list-h">
          <el-button
            v-auth="`project-contract-add`"
            class="btnClass"
            type="primary"
            @click="handleAdd"
            >添加合同</el-button
          >
          <el-form
            :inline="true"
            class="demo-form-inline"
            :model="formInline"
            ref="formRef"
            @submit.prevent
          >
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model.trim="formInline.projectName"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目编号" prop="projectCode">
              <el-input
                v-model.trim="formInline.projectCode"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="createUserName">
              <el-input
                v-model.trim="formInline.createUserName"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="合同名称" prop="contractName">
              <el-input
                v-model.trim="formInline.contractName"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="合同编号" prop="contractNum">
              <el-input
                v-model.trim="formInline.contractNum"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                class="width-custom220"
                v-model="timeValue"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="handleChangeDate"
                clearable
              />
            </el-form-item>

            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          >
            <template #empty>
              <el-empty :image-size="100" description="暂无数据"></el-empty>
            </template>
            <el-table-column type="index" label="序号" width="60">
              <template v-slot="scope">
                <span>{{
                  (formInline.pageNum - 1) * formInline.pageSize +
                  scope.$index +
                  1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="projectName"
              label="项目名称"
            ></el-table-column>
            <el-table-column
              prop="projectCode"
              label="项目编号"
            ></el-table-column>
            <el-table-column
              prop="contractNum"
              label="合同编号"
            ></el-table-column>
            <el-table-column
              prop="contractName"
              label="合同名称"
            ></el-table-column>
            <el-table-column prop="partyA" label="甲方单位"></el-table-column>
            <el-table-column prop="partyB" label="乙方单位"></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
            ></el-table-column>
            <el-table-column
              prop="ext1"
              label="合同签订时间"
            ></el-table-column>
            <el-table-column
              prop="createUserName"
              label="创建人"
            ></el-table-column>
            <el-table-column label="操作" fixed="right" width="120">
              <template #default="{ row }">
                <el-button
                  type="text"
                  v-auth="`project-contract-look`"
                  @click="edit(row, 'look')"
                  >查看</el-button
                >
                <el-button
                  type="text"
                  v-auth="`project-contract-edit`"
                  @click="edit(row, 'edit')"
                  >编辑</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除该条记录吗？"
                  @confirm="del(row)"
                >
                  <template #reference>
                    <el-button v-auth="`project-contract-del`" type="text"
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="contractAttachmentArr" label="合同附件">
              <template #default="{ row }">
                <el-link
                  v-for="(item, index) in row.contractAttachmentArr"
                  :key="index"
                  @click.prevent="preview(item)"
                >
                  {{ item.fileName }}
                </el-link>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="remark" label="备注"></el-table-column> -->
          </el-table>
          <re-pagination
            :total="total"
            v-show="total > 0"
            v-model:page="formInline.pageNum"
            v-model:limit="formInline.pageSize"
            @pagination="handleSearch"
          />
        </el-skeleton>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { reactive, ref, defineComponent } from "vue";
import NotifMessage from "/@/utils/message/notification";
import { useRouter } from "vue-router";
import { postContractDelete, postContractList } from "/@/api/contract";

export default defineComponent({
  name: "ContratList",

  setup() {
    let timeValue = ref(null);
    const router = useRouter();
    const formRef = ref<HTMLFormElement | null>(null) as any;
    const tableData = ref([]);
    let loading = ref<boolean>(false);
    let total = ref<number>(0);
    let formInline = reactive<any>({
      contractName: "",
      contractNum: "",
      projectName: "",
      projectCode: "",
      createUserName: "",
      pageSize: 10,
      pageNum: 1,
      createTimeStart: "",
      createTimeEnd: "",
      stageStatus: "2"
    });

    let projectTypeArr = ref([]);
    const handleReset = () => {
      formRef.value.resetFields();
      timeValue.value = null;
      handleChangeDate(null);
    };

    const handleChangeDate = item => {
      console.log(item, "date");
      if (item) {
        formInline.createTimeStart = item[0].replace("12:00:00", "00:00:00");
        formInline.createTimeEnd = item[1].replace("12:00:00", "00:00:00");
      } else {
        formInline.createTimeStart = "";
        formInline.createTimeEnd = "";
      }
    };
    // 请求公司列表表格数据
    async function getTableData(obj: object = {}) {
      // 真实请求待添加
      loading.value = true;
      try {
        const { code, data } = await postContractList(obj);
        if (code === 200) {
          tableData.value = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    }

    // 请求数据

    const handleSearch = (): void => {
      getTableData(formInline);
    };

    const edit = (row, mode) => {
      router.push({
        path: "/project/contract/detail",
        query: { id: row.id, code: row.projectCode, mode }
      });
    };

    const del = async row => {
      const { code, message } = await postContractDelete(row);
      if (code === 200) {
        NotifMessage.success(message);
        handleSearch();
      }
      console.log(row);
    };

    const handleAdd = () => {
      router.push({
        path: "/project/contract/detail",
        query: { mode: "edit" }
      });
    };

    handleSearch();

    return {
      edit,
      del,
      handleAdd,
      handleSearch,
      projectTypeArr,
      loading,
      formInline,
      formRef,
      total,
      tableData,
      timeValue,
      handleChangeDate,
      handleReset
    };
  }
});
</script>
